<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/yangshi.css"/>
		
		<script src="js/jquery-1.11.0.js"></script>
		<script src="js/china_english.js"></script>
		<script src="js/haoyou.js"></script>
		<script type="text/javascript">
			function liebiao1() {
//				创建列表
//				for(var i in hao_you) {
//					var dx = '<div class="haoyou" a="' + i + '"><img src="img/face/' + hao_you[i].touxiang + '"/>' + hao_you[i].name + '</div>';
//					$(dx).appendTo($('#pengyou'));
//				}
			}

			function liebiao2() {
				var guishu='';
				
					for(var i in gz_hao) {
					if(guishu!=gz_hao[i].shuyu){
						guishu=gz_hao[i].shuyu;
						var bt='<div class="guishu" ><img src="img/face/' + gz_hao[i].touxiang + '"/>' + guishu + '</div>';
						$(bt).appendTo($('#pengyou'));
					}
//					console.log(guishu);
					var dx = '<div class="haoyou" a="' + i + '"><img class="r" src="img/face/' + gz_hao[i].touxiang + '"/>' + gz_hao[i].name + '</div>';
					$(dx).appendTo($('#pengyou'));
				}
			}
			function liebiao3() {
				for(var i in hao_you) {
					var dx = '<div class="haoyou" a="' + i + '"><img src="img/face/' + hao_you[i].touxiang + '"/>' + hao_you[i].name + '</div>';
					$(dx).appendTo($('#pengyou'));
				}
				var s_zimu='';//首字母
				for (var i = 0; i < $('.haoyou').length; i++) {
					for(var j=0;j<$('.haoyou').length-i-1;j++)
						if(query($('.haoyou').eq(j).text())>query($('.haoyou').eq(j+1).text())){
//							console.log(query($('.haoyou').eq(j).text())[0]+'::'+query($('.haoyou').eq(j+1).text()));
							$('.haoyou').eq(j).insertAfter($('.haoyou').eq(j+1));
						}
				}
				for (var i = 0; i < $('.haoyou').length; i++) {
					if(s_zimu!=(query($('.haoyou').eq(i).text())[0])){
						s_zimu=query($('.haoyou').eq(i).text())[0];
						//插入新的abcd
						$('<div class="fenzu">'+s_zimu+'</div>').insertBefore($('.haoyou').eq(i));
					}
				}
			}
			
		</script>
<script type="text/javascript">
$(function(){
	for (var i = 1; i <76 ; i++) {
		
		var $img1=$('<img src="img/faceImg/'+i+'.gif" bj="/'+i+'/" />');
		$('#biaoqing').append($img1);
		if((i%15)==0){
			$('#biaoqing').html($('#biaoqing').html()+'<br/>');
		}
	
	}

	
	$('#caidan').click(function(){
		$('.xuanx').toggle();
	});
	$('.xx_5').click(function(){
		$('#z_div').remove();
	});
	
});
	
</script>
	</head>

	<body onselectstart="return false">
		<img id="beijin" src="img/bg.jpg"/>
		<div id="z_div">
			<!--左侧导航栏-->
			<div id="div_l">
				<div id="div_l_1"><div class="xuanx">
					<div class="xx_1"></div>
					<div class="xx_2"></div>
					<div class="xx_3"></div>
					<div class="xx_4"></div>
					<div class="xx_5"></div>
					<img src="img/caidan.png"/>
				</div>
					<img src="img/face/ziji.jpg" style="width: 40px;height: 40px;"/> 龙波<img id="caidan" class="r" src="img/weixin/xuanxiang.png" /></div>
				<div id="div_l_2"><img src="img/weixin/fada.png" /><input type="text" id="sousuo" placeholder="搜索" /></div>
				<div id="div_l_3">
					<div class="daohang1"></div>
					<div class="daohang2"></div>
					<div class="daohang3"></div>
					<img id="dh_img" src="img/weixin/a1.png" />
				</div>
				<div id="dapy">
					<div class="py_gd">
						<div id="pengyou">
							<!--<div class="haoyou zhong_hei"><img src="img/face/10.jpg"/>好友1	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友2	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友3	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友4	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友5	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友6	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友7	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友8	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友9	</div>
							<div class="haoyou"><img src="img/face/10.jpg"/>好友10</div>
							-->
						</div>
						
					</div>
					<div id="gundong">
						<div id="dong"></div>
					</div>
				</div>
			</div>
			<!--右侧聊天室-->
			
			<div id="div_r">
				<div id="xiangxi">
					<div id="zinr">
						<img src="img/face/10.jpg"/><br />
						<span id="xx_name"></span>
						<span class="hui">备注：</span><span id="xx_beizhu" class="hui"></span><br />
						<span class="fsxx">发消息</span>
					</div>
				</div>
				<img src="img/chushi.png" id="kaishi" />
				<div id="duixiang">
					聊天的对象
				</div>
				<div id="ltneirong">
					<div class="sj">2:00:00</div>

					<div class="hua">
						<div class="tou l"><img src="img/face/1.jpg" /></div>
						<div class="wen l">
							<p>昵称</p>
							<p>头像随机，间隔3秒后输入出时间</p>
						</div>
					</div>

				</div>
				<div id="bqtp">
					<div id="biaoqing">
						
					</div>
					<div class="div_gn1"></div>
					<div class="div_gn2">
					</div>
					<input type="file" id="wenj" style="display: none;">

					<img src="img/weixin/biaoqing.png" /></div>
				<div id="kuang">
					<textarea id="fsnr"></textarea>
					<br />
					<span id="ts">
						按下Ctrl+Enter换行&nbsp;&nbsp;&nbsp;
					</span>
					<div id="btn_fs">发送</div>
				</div>
				<div id="_iframe">
					<iframe frameborder="no" id="iframe_z" src="gzh/gzh1.html" width="100%" height="100%"></iframe>
				</div>
			</div>
		</div>
		<!--新闻-->
<!--<div id="connect">
			<div id="main">
				<div class="l_main">
					<div class="l_face"></div>
					<div class="l_nr">



						<span class="l_jt"></span>
					</div>
				</div>
				<div class="clear"></div>
				<div class="r_main">
					<div class="r_face"></div>
					<div class="r_nr">
						请输入新闻试试
						<span class="r_jt"></span>
					</div>
				</div>
				<div class="clear"></div>

			</div>
			<input type="text" id="txt" />
			<input type="button" id="btn_fs" value="发送" onclick="fs();" />
		</div>-->
		<script type="text/javascript">
				var xx = false;
			var gdhig=parseInt($('#gundong').css('height'));
			var gdwz=$('#gundong').offset().top;
			var neihig=0;
			//滚动条隐藏
//				$('#gundong').hide();
//			$('#dapy').mouseover(function(){
//				$('#gundong').show();
//			});
//			$('#dapy').mouseout(function(){
//				$('#gundong').hide();
//			});
			

//			滚动条
			function yidong(){
				var xx=(neihig+20-gdhig)/(gdhig-80);
				xx=Math.abs(xx);
				$('#pengyou').css('margin-top',-1*($('#dong').offset().top-gdwz)*xx);
			}
			
			$('#dong').mousedown(function() {
				xx = true;
				neihig=parseInt($('#pengyou').css('height'));
			});
			$('#gundong').mousedown(function(e) {
					var theEvent = window.event || e;
					var sbwz=theEvent.clientY+$('body').scrollTop();
					if((sbwz-gdwz)>40&&(sbwz-gdwz)<(gdhig-40)){
						$('#dong').offset({top:(theEvent.clientY+$('body').scrollTop()-40)});
						yidong();
					}
				
			});
			$('body').mouseup(function() {
				xx = false;
			});
			$('body').mousemove(function(e) {
					var theEvent = window.event || e;
//				有滚动条时   +$('body').scrollTop()
				var sbwz=theEvent.clientY+$('body').scrollTop();
				
				if(xx &&(sbwz-gdwz)>40&&(sbwz-gdwz)<(gdhig-40)) {
					$('#dong').offset({top:(sbwz-40)});
					yidong();
//				console.log($('#dong').offset().top);
				}
				else{
					xx=false;
					return;
				}
				
			});
		
		
		
		
			//聊天窗口	
			function huan(a) {
				for(var i = 0; i < a.length; i++) {
					a = a.replace('<', '&lt;');
					a = a.replace('>', '&gt;');
				}
				for(var i = 0; i < a.length; i++) {
					a = a.replace('\n', '<br/>');
				} //文本框输入\n不转换
				var zu=[];
				var ze=/\/(\d{1,2})\//g;
				var arr=[];
				while(arr=ze.exec(a)){
					zu.push(arr[1]);
				}
				
				
//				var arr = a.match(/\/\d\//g);
				//				console.log(arr);
				if(zu) {
					for(var i = 0; i < zu.length; i++) {
						a = a.replace(/\/\d{1,2}\//, '<img src="img/faceImg/' + zu[i] + '.gif"/>');
					}
				}
				return a;
			}
			var _time = new Date();
			var y_time = _time.getTime();
			$(function() {
				function fas() {
					var _text = $("#fsnr").val();
					//					alert('adf\nadsf');
					if(_text.trim() == '') {
						$("#fsnr").val('');

						return;
					}
					_text = huan(_text.trim());
					var x_dat = new Date();
					var dqtime = x_dat.getTime();
					if((dqtime - y_time) > 3000) {
						var shi = x_dat.getHours();
						var fen = x_dat.getMinutes();
						var miao = x_dat.getSeconds();
						var shijian = shi + ':' + fen + ':' + miao;
						var sj = '<div class="sj">' + shijian + '</div>';
						$(sj).appendTo('#ltneirong');
					}
					y_time = dqtime;
					var nm = 'Bin';
										$.post('http://www.tuling123.com/openapi/api', {
						"key": "3c23287d10b140f7b8ab639ccfbce960",
						"info": _text,
						"userid": dqdx_name
					}, function(data) {
//						alert(1)
					var xinnr_1 = '<p>' + dqdx_name + '</p><p>'+data.text+'</p>'+'<div class="you_jt"></div>';

					var div2_1 = '<div class="wen l">' + xinnr_1 + '</div>';

					var div3_1 = '<div class="hua"><div class="tou l"><img src="img/face/' + dqdx_img + '" /></div>' + div2_1 + '</div>';
					$(div3_1).appendTo("#ltneirong");
					
					});
					//对方
			
					//自己
					var xinnr = '<p class="t_r">龙波</p><p>' + _text + '</p>'+'<div class="zuo_jt"></div>';

					var div2 = '<div class="wen r">' + xinnr + '</div>';

					var div3 = '<div class="hua"><div class="tou r"><img src="img/face/ziji.jpg" /></div>' + div2 + '</div>';

					//					}
					$(div3).appendTo("#ltneirong");

					$("#fsnr").val('');
					$('#ltneirong')[0].scrollTop = $('#ltneirong')[0].scrollHeight;

					//					alert(hao_you[j].liaotian);
					hao_you[j].liaotian = $('#ltneirong').html();
					//					alert(hao_you[j].liaotian);
				}

				$('#fsnr').keyup(function(e) {
					//					alert(event.keyCode);//输入法切换后键值不同
					var theEvent = window.event || e;
					if(theEvent.ctrlKey && theEvent.keyCode == 13) {
						$("#fsnr").val($("#fsnr").val() + '\n');
					} else if(theEvent.keyCode == 13) {
						fas();
					}

				});

				$('#btn_fs').click(fas);
			});
			$(function(){
				$('.div_gn1').click(function() {
							$("#biaoqing").toggle();
						});
						$('#biaoqing img').click(function() {
							var tm = $(this).attr('bj');
							//				alert(tm);
							$("#fsnr").val($("#fsnr").val() + tm);
							$("#biaoqing").toggle();
			
						});
						$(".div_gn2").click(function() {
							$('#wenj').click();
						});
			});
			
		</script>
		<!--//聊天窗口-->
		<script type="text/javascript">
			var j = 0;
			var dqdx_name = hao_you[j].name;
			var dqdx_img = hao_you[j].touxiang;
			var dqdx_nr = hao_you[j].liaotian;
			var wzzt = 1;

			function shijian() {

				$('.haoyou').click(function() {
					$('#kaishi').hide();
					$('.haoyou').removeClass('zhong_hei');
					$(this).addClass('zhong_hei');
					var a = $(this).attr('a');
					j = a;
					//				alert(a);
					if(wzzt == 1) {
						dqdx_name = hao_you[a].name;
						dqdx_img = hao_you[a].touxiang;
						dqdx_nr = hao_you[a].liaotian;
					} else if(wzzt == 2) {
						dqdx_name = gz_hao[a].name;
						dqdx_img = gz_hao[a].touxiang;
						dqdx_nr = gz_hao[a].liaotian;
						$('#iframe_z')[0].src=gz_hao[a].neir;
					}else {
						dqdx_name = hao_you[a].name;
						dqdx_img = hao_you[a].touxiang;
						dqdx_nr = hao_you[a].liaotian;
					}

					$('#duixiang').html(dqdx_name);
					$('#ltneirong').html(dqdx_nr);

				});
			}
			function hyxiang() {

				$('.haoyou').click(function() {
					$('#kaishi').hide();
					$('.haoyou').removeClass('zhong_hei');
					$(this).addClass('zhong_hei');
					var a = $(this).attr('a');
					j = a;
					//				alert(a);
						dqdx_name = hao_you[a].name;
						dqdx_img = hao_you[a].touxiang;
						dqdx_nr = hao_you[a].liaotian;
						var dqdx_beizhu=hao_you[a].weixinhao;
					$('#zinr img')[0].src='img/face/'+dqdx_img;
					$('#xiangxi #xx_name').html(dqdx_name);
					$('#xiangxi #xx_name').attr('a',a);
					$('#xiangxi #xx_beizhu').html(dqdx_beizhu);
					$('#xiangxi')[0].style.display='table';
				});
			}
		</script>
		<script type="text/javascript">
			liebiao1();
			shijian();
			var zuijin=$('#pengyou').html();
			$('.daohang1').click(function() {
				$('#_iframe').hide();
				$('#dh_img').attr('src', 'img/weixin/a1.png');
				$('#pengyou').html('');
//				liebiao1();
				$('#pengyou').html(zuijin);
				shijian();
				wzzt = 1;
				$('#kaishi').show();
				$('#xiangxi').hide();
				$('#pengyou').css('margin-top','0px');
				$('#dong').offset({top:($('#gundong').offset().top)});
			});
			$('.daohang2').click(function() {
				$('#dh_img').attr('src', 'img/weixin/a2.png');
				$('#pengyou').html('');
				liebiao2();
				shijian();
				wzzt = 2;
				$('#kaishi').show();
				$('#xiangxi').hide();
				
				$('#_iframe').show();
				
				$('#pengyou').css('margin-top','0px');
				$('#dong').offset({top:($('#gundong').offset().top)});
			});
			$('.daohang3').click(function() {
				$('#_iframe').hide();
				$('#dh_img').attr('src', 'img/weixin/a3.png');
				$('#pengyou').html('');
				liebiao3();
				shijian();
				wzzt = 3;
				$('#kaishi').show();
				hyxiang();
				$('#pengyou').css('margin-top','0px');
				$('#dong').offset({top:($('#gundong').offset().top)});
			});
			
			$('.fsxx').click(function(){
//				$('#xiangxi').hide();
//				$('#dh_img').attr('src', 'img/weixin/a1.png');
//				$('#pengyou').html('');
//				liebiao1();
//				shijian();
//				wzzt = 1;
				$('.daohang1').click();
				$('#kaishi').hide();
				var cunzai_yn=true;//不存在
				$('#pengyou .haoyou').each(function(){
							if($(this).text()==$('#xiangxi #xx_name').html()){
								$(this).prependTo('#pengyou');
								cunzai_yn=false;
//								$('.haoyou').eq(j).insertAfter($('.haoyou').eq(j+1));
							}
						}
				);
				if(cunzai_yn){
					//创建新的放第一位
					
//					alert($('#xiangxi #xx_name').attr('a'));
					var dx = '<div class="haoyou" a="'+$('#xiangxi #xx_name').attr('a')+'">' + $('#zinr img')[0].outerHTML + $('#xiangxi #xx_name').html() + '</div>';
					$(dx).prependTo($('#pengyou'));
				}
				zuijin=$('#pengyou').html();
				$('#pengyou .haoyou').eq(0).addClass('zhong_hei');
//						<div class="haoyou"><img src="img/face/10.jpg"/>好友2	</div>
				
				
				
				
			});
			
		</script>
		<!--新闻-->
		
		<!--<script type="text/javascript">
			$('#txt').keyup(function(event){
				if(event.keyCode==13){
					fs();
				}
			});
//				$("#txt").val()="";
			function fs() {
				var str = $('#txt').val().trim();
				if(str=='天气'){
					return;
				}
				var dx = '<div class="r_main"><div class="r_face"></div><div class="r_nr">' + str + '<span class="r_jt"></span></div></div><div class="clear"></div>'
				$(dx).appendTo('#main');

				$.post('http://www.tuling123.com/openapi/api', {
					"key": "3c23287d10b140f7b8ab639ccfbce960",
					"info": str,
					"userid": "12345678"
				}, function(data) {
					var _list = '1';
					var _url = '2';
					var hf = '<div class="l_main"><div class="l_face"></div><div class="l_nr">' + data.text;
					if(data.list) {
						hf+='<div class="xw_main"><div class="pic"><p>'+data.list[0].article+'</p><a href="'+data.list[0].detailurl+'" target="_blank"><img src="'+data.list[0].icon+'" alt=""></a></div>';
						for(var xw = 1; xw < 4; xw++) {
							hf +='<div class="info"><a href="'+data.list[xw].detailurl+'" target="_blank"><div class="make">'+data.list[xw].article+'</div></a><a href="'+data.list[xw].detailurl+'" target="_blank"><img src="'+data.list[xw].icon+'" alt=""></a></div>';
						}
						hf+='</div>';
					}
					if(data.url) {
						hf += '<a target="_blank" href="' + data.url + '">打开访问</a>';
					}
					hf += '<span class="l_jt"></span></div></div><div class="clear"></div>';

					$(hf).appendTo('#main');
					$('#main')[0].scrollTop = $('#main')[0].scrollHeight;
				});

				$('#main')[0].scrollTop = $('#main')[0].scrollHeight;
			}
		</script>-->
	</body>

</html>